<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Wave Source and Reflection Diagram</title>
</head>
<body>

<canvas id="physics-diagram" width="500" height="400" style="background-color: #fff;"></canvas>

<script>
const canvas = document.getElementById('physics-diagram');
const ctx = canvas.getContext('2d');

// --- Styles ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 1.5;
ctx.lineCap = 'round';

// --- Observer A ---
const obsA_x = 100;
const obsA_y = 150;
const pointRadius = 5;

// Circle for A
ctx.beginPath();
ctx.arc(obsA_x, obsA_y, pointRadius, 0, 2 * Math.PI);
ctx.stroke();
// Label 'A'
ctx.font = 'italic 22px Times New Roman';
ctx.fillText('A', obsA_x - 25, obsA_y + 7);

// --- Wave Source ---
const source_x = 180;
const source_y = 150;

// Circle for source
ctx.beginPath();
ctx.arc(source_x, source_y, pointRadius, 0, 2 * Math.PI);
ctx.stroke();
// Label '波源' (Wave Source)
ctx.font = '24px KaiTi';
ctx.fillText('波源', source_x + 15, source_y + 8);

// --- Velocity Vector v_S ---
const arrow_start_x = source_x + pointRadius + 5;
const arrow_end_x = 320;
const arrow_y = source_y;
ctx.lineWidth = 2;

// Arrow shaft
ctx.beginPath();
ctx.moveTo(arrow_start_x, arrow_y);
ctx.lineTo(arrow_end_x, arrow_y);
ctx.stroke();
// Arrowhead
ctx.beginPath();
ctx.moveTo(arrow_end_x, arrow_y);
ctx.lineTo(arrow_end_x - 12, arrow_y - 6);
ctx.moveTo(arrow_end_x, arrow_y);
ctx.lineTo(arrow_end_x - 12, arrow_y + 6);
ctx.stroke();

// Label 'v_S'
ctx.font = 'italic 22px Times New Roman';
ctx.fillText('v', arrow_end_x - 20, arrow_y + 28);
ctx.font = 'italic 16px Times New Roman';
ctx.fillText('S', arrow_end_x - 8, arrow_y + 32);


// --- Reflective Wall ---
const wall_x = 420;
const wall_top_y = 40;
const wall_bottom_y = 310;
ctx.lineWidth = 2;

// Main vertical line
ctx.beginPath();
ctx.moveTo(wall_x, wall_top_y);
ctx.lineTo(wall_x, wall_bottom_y);
ctx.stroke();

// Hatch marks
ctx.lineWidth = 1.5;
const hatch_offset = 12;
for (let y = wall_top_y; y <= wall_bottom_y; y += 18) {
    ctx.beginPath();
    ctx.moveTo(wall_x, y);
    // Hatches are slanted down and to the right.
    ctx.lineTo(wall_x + hatch_offset, y + hatch_offset);
    ctx.stroke();
}

// --- Bottom Label ---
ctx.fillStyle = 'black';
ctx.font = '22px KaiTi';
ctx.textAlign = 'center';
ctx.fillText('习题 11-37 图', canvas.width / 2, 370);

</script>

</body>
</html>